<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗词猜测游戏</title>
    <style>
        .guess {
            display: flex;
            margin-bottom: 10px;
        }
        .guess span {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin-right: 5px;
            border: 1px solid #000;
        }
        .correct {
            background-color: green;
        }
        .present {
            background-color: yellow;
        }
        .absent {
            background-color: gray;
        }
        .tooltip {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <h1>古诗词猜测游戏</h1>
    <div class="tooltip">
    <p>黄色：在谜底中，位置不对</p>
    <p>绿色：在谜底中，位置对</p>
    <p>灰色：不在谜底中</p>
    </div>
    <p>请输入14个字的古诗词：</p>
    <input type="text" id="guessInput">
    <button onclick="submitGuess()">确认</button>
    <p></p>
    <div id="guesses"></div>
    <p></p>
    <p id="message"></p>
    <script>
        let poemData = [
            {"poem": "身无彩凤双飞翼心有灵犀一点通"},
            {"poem": "心似白云常自在意如流水任东西"},
            {"poem": "若无闲事挂心头便是人间好时节"},
            {"poem": "飞流直下三千尺疑似银河落九天"},
    {"poem": "春风又绿江南岸明月何时照我还"},
    {"poem": "落霞与孤鹜齐飞秋水共长天一色"},
    {"poem": "人生得意须尽欢莫使金樽空对月"},
    {"poem": "山重水复疑无路柳暗花明又一村"},
    {"poem": "天生我材必有用千金散尽还复来"},
    {"poem": "无边落木萧萧下不尽长江滚滚来"},
    {"poem": "醉卧沙场君莫笑古来征战几人回"},
    {"poem": "不畏浮云遮望眼自缘身在最高层"},
    {"poem": "纸上得来终觉浅绝知此事要躬行"},
    {"poem": "不识庐山真面目只缘身在此山中"},
    {"poem": "桃花潭水深千尺不及汪伦送我情"},
    {"poem": "春风得意马蹄疾一日看尽长安花"},
    {"poem": "两情若是久长时又岂在朝朝暮暮"},
    {"poem": "劝君更尽一杯酒西出阳关无故人"},
    {"poem": "莫愁前路无知己天下谁人不识君"},
    {"poem": "忽如一夜春风来千树万树梨花开"},
    {"poem": "黄沙百战穿金甲不破楼兰终不还"},
    {"poem": "长风破浪会有时直挂云帆济沧海"},
    {"poem": "天生丽质难自弃一朝选在君王侧"},
    {"poem": "小楼一夜听春雨深巷明朝卖杏花"},
    {"poem": "独在异乡为异客每逢佳节倍思亲"},
    {"poem": "接天莲叶无穷碧映日荷花别样红"},
    {"poem": "葡萄美酒夜光杯欲饮琵琶马上催"},
    {"poem": "春江潮水连海平海上明月共潮生"},
    {"poem": "抽刀断水水更流举杯消愁愁更愁"},
    {"poem": "月落乌啼霜满天江枫渔火对愁眠"},
    {"poem": "醉后不知天在水满船清梦压星河"},
    {"poem": "衣带渐宽终不悔为伊消得人憔悴"},
    {"poem": "日出江花红胜火春来江水绿如蓝"},
    {"poem": "玲珑骰子安红豆入骨相思知不知"},
    {"poem": "春风十里扬州路卷上珠帘总不如"},
    {"poem": "曾经沧海难为水除却巫山不是云"},
    {"poem": "同是天涯沦落人相逢何必曾相识"},
    {"poem": "一骑红尘妃子笑无人知是荔枝来"},
    {"poem": "问渠那得清如许为有源头活水来"},
    {"poem": "无可奈何花落去似曾相识燕归来"},
    {"poem": "沉舟侧畔千帆过病树前头万木春"},
    {"poem": "天街小雨润如酥草色遥看近却无"},
    {"poem": "乱花渐欲迷人眼浅草才能没马蹄"},
    {"poem": "疏影横斜水清浅暗香浮动月黄昏"},
    {"poem": "人生自是有情痴此恨不关风与月"},
    {"poem": "东边日出西边雨道是无晴却有晴"},
    {"poem": "身无彩凤双飞翼心有灵犀一点通"},
    {"poem": "不畏浮云遮望眼自缘身在最高层"},
    {"poem": "相见时难别亦难东风无力百花残"},
    {"poem": "春蚕到死丝方尽蜡炬成灰泪始干"},
    {"poem": "黑云压城城欲摧甲光向日金鳞开"},
    {"poem": "庄生晓梦迷蝴蝶望帝春心托杜鹃"},
    {"poem": "横看成岭侧成峰远近高低各不同"},
    {"poem": "不识庐山真面目只缘身在此山中"},
    {"poem": "两岸猿声啼不住轻舟已过万重山"},
    {"poem": "莫笑农家腊酒浑丰年留客足鸡豚"},
    {"poem": "山重水复疑无路柳暗花明又一村"},
    {"poem": "黄梅时节家家雨青草池塘处处蛙"},
    {"poem": "有约不来过夜半闲敲棋子落灯花"},
    {"poem": "梅须逊雪三分白雪却输梅一段香"},
    {"poem": "江山代有才人出各领风骚数百年"},
    {"poem": "苟利国家生死以岂因祸福避趋之"},
    {"poem": "我自横刀向天笑去留肝胆两昆仑"},
    {"poem": "落红不是无情物化作春泥更护花"},
    {"poem": "长风万里送秋雁对此可以酣高楼"},
    {"poem": "抽刀断水水更流举杯消愁愁更愁"},
    {"poem": "人生在世不称意明朝散发弄扁舟"},
    {"poem": "大鹏一日同风起扶摇直上九万里"},
    {"poem": "仰天大笑出门去我辈岂是蓬蒿人"},
    {"poem": "天生我材必有用千金散尽还复来"},
    {"poem": "黄河远上白云间一片孤城万仞山"},
    {"poem": "羌笛何须怨杨柳春风不度玉门关"},
    {"poem": "秦时明月汉时关万里长征人未还"},
    {"poem": "但使龙城飞将在不教胡马度阴山"},
    {"poem": "醉卧沙场君莫笑古来征战几人回"},
    {"poem": "葡萄美酒夜光杯欲饮琵琶马上催"},
    {"poem": "劝君更尽一杯酒西出阳关无故人"},
    {"poem": "独在异乡为异客每逢佳节倍思亲"},
    {"poem": "春城无处不飞花寒食东风御柳斜"},
    {"poem": "日暮汉宫传蜡烛轻烟散入五侯家"},
    {"poem": "两个黄鹂鸣翠柳一行白鹭上青天"},
    {"poem": "窗含西岭千秋雪门泊东吴万里船"},
    {"poem": "桃花潭水深千尺不及汪伦送我情"},
    {"poem": "飞流直下三千尺疑是银河落九天"},
    {"poem": "朝辞白帝彩云间千里江陵一日还"},
    {"poem": "两岸猿声啼不住轻舟已过万重山"},
    {"poem": "孤帆远影碧空尽唯见长江天际流"},
    {"poem": "天门中断楚江开碧水东流至此回"},
    {"poem": "两岸青山相对出孤帆一片日边来"},
    {"poem": "遥望洞庭山水翠白银盘里一青螺"},
    {"poem": "接天莲叶无穷碧映日荷花别样红"},
    {"poem": "小荷才露尖尖角早有蜻蜓立上头"},
    {"poem": "梅子金黄杏子肥麦花雪白菜花稀"},
    {"poem": "日长篱落无人过惟有蜻蜓蛱蝶飞"}


        ];
        let currentPoem = "";
        let guessesLeft = 20;

        function getRandomPoem() {
            let randomIndex = Math.floor(Math.random() * poemData.length);
            currentPoem = poemData[randomIndex].poem;
        }

        function removePunctuation(text) {
            // 移除所有标点符号
            return text.replace(/[，。！？；：“”‘’《》【】、]/g, "");
        }

        function levenshteinDistance(a, b) {
            if (a.length === 0) return b.length;
            if (b.length === 0) return a.length;

            let matrix = [];
            for (let i = 0; i <= b.length; i++) {
                matrix[i] = [i];
            }
            for (let j = 0; j <= a.length; j++) {
                matrix[0][j] = j;
            }

            for (let i = 1; i <= b.length; i++) {
                for (let j = 1; j <= a.length; j++) {
                    if (b.charAt(i - 1) === a.charAt(j - 1)) {
                        matrix[i][j] = matrix[i - 1][j - 1];
                    } else {
                        matrix[i][j] = Math.min(
                            matrix[i - 1][j - 1] + 1,
                            matrix[i][j - 1] + 1,
                            matrix[i - 1][j] + 1
                        );
                    }
                }
            }

            return matrix[b.length][a.length];
        }

        function findClosestPoem(guess) {
            let closestPoem = "";
            let minDistance = Infinity;

            for (let poem of poemData) {
                let distance = levenshteinDistance(guess, poem.poem);
                if (distance < minDistance) {
                    minDistance = distance;
                    closestPoem = poem.poem;
                }
            }

            return closestPoem;
        }

        function submitGuess() {
            if (guessesLeft <= 0) {
                document.getElementById("message").innerText = "猜测次数已用完，更换谜底。";
                getRandomPoem();
                guessesLeft = 20;
                document.getElementById("guesses").innerHTML = "";
                return;
            }

            let guess = document.getElementById("guessInput").value;
            // 移除标点符号
            guess = removePunctuation(guess);
            // 截取前14个字
            guess = guess.substring(0, 14);

            if (guess.length < 14) {
                alert("请输入至少14个有效汉字！");
                return;
            }

            // 检查用户输入是否在词库中
            let isInLibrary = poemData.some(poem => poem.poem === guess);
            if (!isInLibrary) {
                let closestPoem = findClosestPoem(guess);
                document.getElementById("message").innerText = `您输入的古诗词不在词库中，最相近的词句是：${closestPoem}`;
                return;
            }

            let guessDisplay = document.createElement("div");
            guessDisplay.className = "guess";
            for (let i = 0; i < 14; i++) {
                let char = guess[i];
                let span = document.createElement("span");
                span.innerText = char;
                if (char === currentPoem[i]) {
                    span.className = "correct";
                } else if (currentPoem.includes(char)) {
                    span.className = "present";
                } else {
                    span.className = "absent";
                }
                guessDisplay.appendChild(span);
            }
            document.getElementById("guesses").appendChild(guessDisplay);

            if (guess === currentPoem) {
                document.getElementById("message").innerText = "恭喜你，猜对了！";
                return;
            }

            guessesLeft--;
            document.getElementById("message").innerText = `剩余猜测次数：${guessesLeft}`;
            document.getElementById("guessInput").value = "";
        }

        window.onload = function() {
            getRandomPoem();
        };
    </script>
</body>
</html>
